<script setup lang="ts">
import {onMounted, ref} from "vue";
import {createOrderAPI,getAddressAPI} from "@/api/order";
const deliveryTime = ref('1')
const dialogChangeAddressVisible = ref(false)
const payType = ref('1')
const addAddressForm = ref({
  name:'',
  phone:'',
  address:''
})
const getAddress = async ()=>{
  const res = await getAddressAPI()
  console.log('收货地址：',res)
}
const submit = async ()=>{
  const res = await createOrderAPI([{skuId:'',count:1}],'')
}
onMounted(()=>{getAddress()})
</script>

<template>
  <div class="check">
    <h1>收货地址</h1>
    <div class="address">
      <div>
        <p>收货人:{{}}</p>
        <p>联系方式:{{}}</p>
        <p>收货地址:{{}}</p>
      </div>
      <div class="addBtn">
        <el-button type="primary">切换地址</el-button>
        <el-dialog v-model="dialogChangeAddressVisible" title="添加地址" width="500" >
          <ul v-for="item in 4">
            <li>
              <div>
                <p>收货人:{{}}</p>
                <p>联系方式:{{}}</p>
                <p>收货地址:{{}}</p>
              </div>
            </li>
          </ul>
        </el-dialog>
        <el-button type="primary">添加地址</el-button>
      </div>

    </div>
    <h1>商品信息</h1>
    <div>
      <el-table>
        <el-table-column prop="" label="商品信息" >
          <template #default="scope">
            <img :src="scope.picUrl" alt="">
            <p>{{scope.name}}</p>
            <p>{{scope.specsText}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="count" label="数量" />
        <el-table-column  label="小计" >
          <template #default="scope">
            {{scope.price * scope.count}}
          </template>
        </el-table-column>
        <el-table-column label="实付" >
          <template #default="scope">
            {{scope.price * scope.count}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <h1>配送时间</h1>
    <div>
      <el-radio-group v-model="deliveryTime">
        <el-radio-button  label="1" style="margin-right: 30px">不限送货时间：周一至周日</el-radio-button>
        <el-radio-button label="2" style="margin-right: 30px">工作日送货：周一至周五</el-radio-button>
        <el-radio-button label="3">双休日、假日送货：周六至周日</el-radio-button>
      </el-radio-group>
    </div>
    <h1>支付方式</h1>
    <div class="payType">
      <el-radio-group v-model="payType">
        <el-radio-button  label="1" style="margin-right: 30px">在线支付</el-radio-button>
        <el-radio-button label="2" style="margin-right: 30px">货到付款</el-radio-button>

      </el-radio-group>
      <span>货到付款需5元手续费</span>
    </div>
    <h1>金额明细</h1>
    <div class="price">
      <span>商品数量：</span><p> </p>
      <span>商品总价：</span><p> </p>
      <span>运费：   </span><p> </p>
      <span>应付总额：</span><p> </p>
      <el-button type="primary" @click="submit">提交订单</el-button>
    </div>
  </div>

</template>

<style scoped>
.check{
  width: 70vw;
  margin: 0 auto;
  h1{
    margin: 40px 0;
    font-size: 1.5em;
  }
  .address{
    display: flex;
    div{
      width: 600px;
    }
    .addBtn{
       button{
         margin-left: 30px;
       }
    }
  }
}
.payType{
  display: flex;
  align-items: flex-end;
  span{
    color: #787474;
    font-size: 0.8em;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 15px;
  }
}
.price{
  width: 400px;
  float: right;
  span{
    display: inline-block;
    width: 80px;
    text-align: justify;
    text-align-last: justify;
  }
}
</style>
